<template>
  <div class="container">
    <!-- 骨架屏 -->
    <van-skeleton style="margin-top:80px" title :row="6" v-if="!app_infoArray.length" />
    <!-- tab -->
    <van-tabs v-model="active" v-else >
      <van-tab title="申请单信息">
        <van-collapse v-model="activeNames">
          <van-collapse-item v-for="(item, index) in app_infoArray" :key="index" :title="item.title" :name="index">
            <ul class="client_info">
              <li class="client_infoItem" v-for="(item2, index) in item.itemArray" :key="index">
                <span>{{ item2.project_key }}</span>
                <span class="right">{{ item2.project_value }}</span>
              </li>
            </ul>
          </van-collapse-item>
          <!-- goods_info -->
          <router-link to="/goods" class="goods_info">
            <span>项目商品信息</span>
            <span>
              <van-icon name="arrow" />
            </span>
          </router-link>
        </van-collapse>
      </van-tab>
      <van-tab title="审批状态">
        <div class="app_status" v-for="(item, index) in app_statusArray" :key="index">
          <span class="ball" :class="{
              green: item.status === '0',
              red: item.status === '1',
              bbb: item.status === '2',
            }"></span>
          <ul>
            <li v-for="(i2, index) in item.itemArray" :key="index" class="app_statusItem">
              <span>{{ i2.statue_key }}</span>
              <span v-if="index === 0" class="right">
                <van-button :class="{
                    redBorder: item.status === '1',
                    bbbBorder: item.status === '2',
                  }" plain round type="primary" size="mini">{{ i2.status_value }}</van-button>
              </span>
              <span class="right" v-else>{{ i2.status_value }}</span>
            </li>
            <!-- <li class="app_statusItem">
              <span>处理人</span>
              <span class="right">xxx</span>
            </li>
             <li class="app_statusItem">
              <span>时间</span>
              <span class="right eee">2022-5-01</span>
            </li>
            <li class="app_statusItem">
              <span>备注</span>
              <span class="right"></span>
            </li> -->
          </ul>
        </div>

        <!-- <div class="app_status">
          <span class="ball green"></span>
          <ul>
            <li class="app_statusItem">
              <span>地市复核</span>
              <span class="right"><van-button plain round  type="primary" size="mini">通过</van-button></span>
            </li>
             <li class="app_statusItem">
              <span>处理人</span>
              <span class="right">xxx</span>
            </li>
             <li class="app_statusItem">
              <span>时间</span>
              <span class="right eee">2022-5-01</span>
            </li>
            <li class="app_statusItem">
              <span>备注</span>
              <span class="right"></span>
            </li>
          </ul>
        </div>

         <div class="app_status">
          <span class="ball red"></span>
          <ul>
            <li class="app_statusItem">
              <span>省级审批</span>
              <span class="right"><van-button plain round  type="primary" size="mini" class="redBorder">不通过</van-button></span>
            </li>
             <li class="app_statusItem">
              <span>处理人</span>
              <span class="right">xxx</span>
            </li>
             <li class="app_statusItem">
              <span>时间</span>
              <span class="right eee">2022-5-01</span>
            </li>
            <li class="app_statusItem">
              <span>备注</span>
              <span class="right"></span>
            </li>
          </ul>
        </div>

         <div class="app_status">
          <span class="ball bbb"></span>
          <ul>
            <li class="app_statusItem">
              <span>集团审批</span>
              <span class="right"><van-button plain round  type="primary" size="mini" class="bbbBorder">待审批</van-button></span>
            </li>
             <li class="app_statusItem">
              <span>处理人</span>
              <span class="right">xxx</span>
            </li>
             <li class="app_statusItem">
              <span>时间</span>
              <span class="right eee">2022-5-01</span>
            </li>
            <li class="app_statusItem">
              <span>备注</span>
              <span class="right"></span>
            </li>
          </ul>
        </div> -->
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getProjectInfoAPI } from '@/api'
export default {
  name: "ProjectVue",
  data() {
    return {
      active: 0,
      activeNames: ["0"],
      // appinfo
      app_infoArray: [],
      //appstatus
      app_statusArray: [],
    };
  },
  created() {
    this.getAppInfo();
    this.getAppStatus();
  },
  methods: {
    // 获取申请单信息数据
    async getAppInfo() {

      const { data } = await getProjectInfoAPI('info')
      this.app_infoArray = data.data.app_info.app_infoArray;
    },
    // 获取审批状态数据
    async getAppStatus() {
      const { data } = await getProjectInfoAPI('status')
      // console.log(data.data.app_status);
      this.app_statusArray = data.data.app_status;
    },
    // Tab栏首次渲染事件
    // onRendered() {
    //   console.log("首次渲染");
    //   // 加载数据
    //   this.getAppInfo();
    //   this.getAppStatus();
    // },
  },
};
</script>

<style lang="less" scoped>
.container {
  overflow: hidden;
  min-height: 95vh;
  height: 100%;
  background-color: #eee;
  .goods_info {
    background-color: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 15px;
      color: #323233;
    }
  }
  .client_info {
    .client_infoItem {
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      span {
        color: #323233;
      }
      .right {
        width: 150px;
        color: #969799;
      }
    }
  }
  .app_status {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin: 10px 0;
    ul {
      :nth-child(3) {
        :last-child {
          font-size: 14px;
          color: #b4b4b4;
        }
      }
      .app_statusItem {
        background-color: #fff;
        width: 320px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
        > :first-child {
          display: block;
          width: 100px;
          text-align: right;
          color: black;
        }
        .eee {
          color: #ccc;
          font-size: 14px;
        }
        .right {
          width: 150px;
          .van-button {
            width: 100px;
          }
        }
      }
    }
    .green {
      background-color: greenyellow;
    }
    .red {
      background-color: red;
    }
    .bbb {
      background-color: #b4b4b4;
    }
    .redBorder {
      border: 1px solid red;
      color: #323233;
    }
    .bbbBorder {
      border: 1px solid #b4b4b4;
      color: #323233;
    }
    .ball {
      width: 20px;
      height: 20px;
      border-radius: 50px;
    }
  }
}
.van-collapse-item {
  margin-bottom: 20px;
}
</style>